<!DOCTYPE HTML>
<html>

<head>
<title>report</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/core.css" />

</head>

<body id="app" class="report">

<div class="side">
	<dl>
		<dt>
			<span></span>
			<span></span>
			<span></span>
		</dt>
		<dd class="cb">首页</dd>
		<dd>语言国际化组件</dd>
		<dd>Jquery ajax 异步管理组件</dd>
		<dd>语言国际化组件</dd>
		<dd>Jquery ajax 异步管理组件</dd>
	</dl>
</div>
<!------------------------------------------------------------------------------>
<!--main begin-->
<div class="main">
	<dl class="topBar">
		<dt class="logo"></dt>
		<dd class="topMenu">
			<button class="language">切换语言(英文)</button>
			<button class="asyncAjax">多个ajax异步管理,单击看看</button>
		</dd>
	</dl>
	<div class="container"> <!--container begin-->
		<!--page title begin-->
		<h1 class="title" p-html="report.title"></h1>
		<!--page title end-->

		<!--筛选 begin --> 
		<dl class="date">
			<dt>
				<i></i>
				<h2 p-html="report.searchTitle"></h2>
			</dt>
			<dd>
				 <label class="fl" p-html="report.searchCaption"></label>
				 <div class="text fl">
				 	<input type="input" name="" value=""/>
				 </div>

				 <div class="buttons fl">
				 	<span p-html="report.buttons.titleA"></span>
				 	<span p-html="report.buttons.titleB"></span>
				 	<span p-html="report.buttons.titleC"></span>
				 	<span p-html="report.buttons.titleD"></span>
				 </div>
			</dd>
		</dl>
		<!--筛选 end --> 

		<!--search begin -->
		<dl class="search">
			<dt>

			</dt>
			<dd class="closed">
				<span></span>
			</dd>
		</dl> 
		<!--search end --> 

		<dl class="dataTitle">
			<dt>
				<i></i>
				<h2 p-html="report.dataTitle"></h2>
			</dt>
		</dl>

		<!--tabs begin-->
		<div id="tabContent" class="tabs">

		</div>
		<div><!--所有Tab的初始化信息-->
			<div id="tab1">
				WUI：<a target="_blank" href="http://www.flybirdsoft.com/WUI">www.flybirdsoft.com/WUI</a>
			</div>
			<div id="tab2">
				作者：邬畏畏
			</div>
			<div id="tab3">
				更多组件请访问网址
			</div>
		</div><!-- end -->
		<!--tabs  end -->
	</div>
	<!--container end-->
</div>
<!--main end-->

</body>

</html>

<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/painter.js"></script>
<script type="text/javascript" src="js/wTab-min.js"></script>
<script type="text/javascript" src="js/ajaxCore.js"></script>

<script type="text/javascript">

var app = {
	lunguage_cn : {
	"report.title" : "你的报表信息",
	"report.searchTitle" : "筛选条件",
	"report.dataTitle" : "数据统计",
	"report.buttons.titleA" : "北京",
	"report.buttons.titleB" : "上海",
	"report.buttons.titleC" : "包头",
	"report.buttons.titleD" : "内蒙古"
	},
	lunguage_en : {
	"report.title" : "Your report Infomatioin",
	"report.searchTitle" : "condition",
	"report.dataTitle" : "data statistics",
	"report.buttons.titleA" : "Beijing",
	"report.buttons.titleB" : "Shanghai",
	"report.buttons.titleC" : "Baotou",
	"report.buttons.titleD" : "Neiminggu"
	},
};

app.initLanguage = function (code) {
	/*
	code = "en|cn"
	*/

	/*
	语言国际化组件的应用
	*/
	var p = new painter("#app");
	if(code=="cn")
	{
		p.fill(app.lunguage_cn);
	}
	else
	{
		p.fill(app.lunguage_en);
	}
}

app.initTab = function(){
	/*
	wTab 组件的使用 
	注意：此UI组件需要附带样式，请查看core.css，
	根据需求我们可以修改wTabUI组件的样式去使用不同的UI风格
	*/
	var tab = new wTab();
	tab.addTab("tab页签一","tab1");
	tab.addTab("tab页签二","tab2");
	tab.addTab("tab页签二","tab3");
	tab.isdivtab=false;
	tab.click=function(index){
	  	
	}
	tab.initTab("tabContent"); 

}

app.asyncAjax = function(){
	/*
	异步$.ajax管理组件
	管理多个ajax请求的处理顺序
	*/
	ajaxCore.ajax({
		url:"json/json1.json",
		dataType:"json"
	}).success(function(data){
		/*先处理*/
		alert(data.name);
		alert(data.age);
	}).ajax({
		url:"json/json2.json"  /*dataType默认是html*/
	}).success(function(data){
		/*后处理*/
		alert(data);
	});	
}

app.bingEvent = function(){
	$(".language").bind("click",function(){
		var text = this.innerHTML;
		
		if(text.indexOf("英文")>0)
		{
			app.initLanguage("en");
			this.innerHTML = "语言切换(中文)";
		}
		else
		{
			app.initLanguage("cn");
			this.innerHTML = "语言切换(英文)";
		}
	});

	$(".asyncAjax").bind("click",function(){
		app.asyncAjax();
	});


}

/*######################################*/

app.initLanguage("cn");

app.initTab();

app.bingEvent();

</script>